<template>
  <view class="header flex-space-between">
    <view class="menu flex-space-around" :style="{ marginRight: props.type == 1 ? '30rpx' : '' }" @click.stop>
      <view
        class="m-item flex"
        :class="{ 'text-active': index == light.menu }"
        v-for="(item, index) in info.menu"
        :key="index"
        @click="menuClick(item.params, index)"
      >
        <text class="one-line">{{ item.text }}</text>
        <image v-if="isSelect(index)" src="/static/icon/09.png"></image>
        <image v-else src="/static/icon/10.png"></image>
      </view>
    </view>
    <view class="search flex">
      <image v-if="props.type == 0" src="/static/icon/27.png" @click="tools.navTo('/pagesA/match/search?params=' + JSON.stringify(params))"></image>
      <view class="box flex" v-if="props.type == 1">
        <image src="/static/icon/27.png"></image>
        <input type="text" placeholder="关键词搜索" placeholder-style="color:#BBBBBB" v-model="params.key_words" @blur="search" />
      </view>
    </view>
  </view>
  <u-mask :zoom="false" :show="isShow" :custom-style="{ height: tools.clientTopHight(50), bottom: 0, top: 'auto' }" @click="closeMask">
    <view class="drop flex-wrap" v-if="info.drop.length" @click.stop>
      <!-- :class="{ 'drop-item-active': index == light.drop }" -->
      <view v-for="(item, index) in info.drop" :key="index" @click="dropClick(item, index)" :class="item.selected == false ? 'drop-item' : 'drop-itemS'" >
        {{ item.name }}
      </view>
    </view>
  </u-mask>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getMatchClassify, getMatchCity, getActiveClassify } from '@/service/api/index'
import tools from '@/utils/tools'

const emit = defineEmits(['change'])

const props = defineProps({
  // 0 => 赛事 1 => 活动
  type: {
    type: Number,
    default() {
      return 0
    }
  }
})

let data = ref(null)
let isShow = ref(false)

let info = reactive({
  drop: [],
  city: [],
  province: [],
  menu: [
    // {
    //   text: '类型',
    //   params: 'type'
    // },
    {
      text: '分类',
      params: 'classify'
    },
    {
      text: '状态',
      params: 'state'
    }
  ]
  // menu: ['类型', '分类', '状态']
})

if (props.type == 1) {
  info.menu = info.menu.splice(1, 2)
}

let params = reactive({
  page: 1,
  key_words: '',
  // 赛事类型
  type: 0,
  // 状态
  state: 0,
  // 分类
  classify: 0
  // city: '',
  // province: ''
})

let light = reactive({
  menu: null,
  drop: 0
})

// 是否选中
const isSelect = (index: number) => {
  if (index == light.menu) return true
  return false
}

// 切换菜单
const menuClick = (params: string, index: number) => {
  light.drop = 0
  if (light.menu == index) {
    light.menu = null
    isShow.value = false
  } else {
    light.menu = index
    isShow.value = true
  }
  info.drop = data.value[params]
}

// 切换列表
const dropClick = (item: { id: number; name: string,selected:boolean}, index: number) => {
  light.drop = index
  isShow.value = !isShow.value
  params[info.menu[light.menu].params] = item.id
  console.log(item);
  console.log(index);
  info.menu[light.menu].text = item.name

  light.menu = null
  emit('change', params)
  info.drop.forEach(res=>{
	  res.selected=false
  })
  return item.selected=true
}

// 搜索
const search = () => {
  light.menu = null
  emit('change', params)
}

// 关闭mask
const closeMask = () => {
  light.menu = null
  isShow.value = !isShow.value
  // emit('change', params)
}

// 赛事分类
const getMatchClassifyApi = async () => {
  const { msg } = await getMatchClassify()
  data.value = msg
  //前端手动添加选中效果
  data.value.type.forEach(res=>{
	  res.id==0 ?  res.selected=true : res.selected=false
  })
  data.value.state.forEach(res=>{
  	  res.id==0 ?  res.selected=true : res.selected=false
  })
  data.value.classify.forEach(res=>{
  	  res.id==0 ?  res.selected=true : res.selected=false
  })
  info.drop = msg.type
}

// 活动分类
const getActiveClassifyApi = async () => {
  const { msg } = await getActiveClassify()
  data.value = msg
  info.drop = msg.type
}

// 赛事城市数据
const getMatchCityApi = async (province) => {
  const { msg } = await getMatchCity({ province })
  info.city = msg
}

onMounted(() => {
  if (props.type == 0) return getMatchClassifyApi() // 赛事分类
  getActiveClassifyApi() //活动分类
})
</script>

<style lang="scss" scoped>
.text-active {
  color: #e6425e !important;
}

.header {
  width: 100%;
  z-index: 10;
  position: fixed;
  height: 100rpx;
  background-color: #fff;
}
.search {
  margin-right: 30rpx;
  image {
    width: 32rpx;
    height: 32rpx;
  }
  .box {
    width: 400rpx;
    height: 64rpx;
    border-radius: 32rpx;
    background: rgba(249, 249, 249);
    image {
      margin-left: 22rpx;
    }
    input {
      width: 272rpx;
      height: 40rpx;
      font-size: 28rpx;
      line-height: 40rpx;
      margin-left: 10rpx;
    }
  }
}
.menu {
  flex: 1;
  margin-left: 30rpx;
  margin-right: 120rpx;
  background-color: #fff;
  // border-bottom: 1px solid #eeeeee;
  .m-item {
    height: 44rpx;
    font-size: 30rpx;
    line-height: 44rpx;
    text {
      max-width: 100rpx;
      margin-right: 10rpx;
    }

    image {
      width: 18rpx;
      height: 10rpx;
    }
  }
}
.drop {
  background-color: #fff;
  padding: 30rpx 34rpx 40rpx 34rpx;
  .drop-item {
    font-size: 28rpx;
	padding: 0rpx 22rpx;
	height: 48rpx;
    border-radius: 6rpx;
	display: flex;
	align-items: center;
	margin-top: 15rpx;
    margin-right: 35rpx;
  }
  .drop-itemS {
	 font-size: 28rpx;
	 padding: 0rpx 22rpx;
	 height: 48rpx;
	 border-radius: 6rpx;
	 display: flex;
	 align-items: center;
	 margin-top: 15rpx;
	 margin-right: 35rpx;
	 color: #ffffff;
	 background-color: #e6425e;
  }
  .drop-item-active {
    color: #fff !important;
    background-color: #e6425e;
  }
}
</style>
